<template>
  <div id="TheryChart">
    <div class="TheryChartContainer1"></div>
    <div class="TheryChartContainer2"></div>
    <div class="TheryChartContainer3"></div>
    <div class="TheryChartContainer4"></div>
  </div>
</template>

<script>
export default {
  props: {
    detailData: {},
  },
  data() {
    return {
      option1: {
        color: ["#3398DB"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        grid: {
          left: "3%",
          right: "6%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            name: "科目",
            nameGap: 0, // 距离坐标轴的距离
            // data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
            data:[],
            axisTick: {
              alignWithLabel: true,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "平均成绩分布",
          },
        ],
        series: [
          {
            name: "",
            type: "bar",
            barWidth: "60%",
            // data: [10, 52, 200, 334, 390, 330, 220],
            data:[],
          },
        ],
      },
      option2: {
        color: ["#3398DB"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        grid: {
          left: "3%",
          right: "10%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            name: "分数段",
            nameGap: 0, // 距离坐标轴的距离
            // data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
            data:[],
            axisTick: {
              alignWithLabel: true,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "成绩分布",
          },
        ],
        series: [
          {
            name: "",
            type: "bar",
            barWidth: "60%",
            // data: [10, 52, 200, 334, 390, 330, 220],
            data:[],
          },
        ],
      },
      option3: {
        color: ["#3398DB"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        grid: {
          left: "3%",
          right: "10%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            name: "时间段",
            nameGap: 0, // 距离坐标轴的距离
            // data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
            data:[],
            axisTick: {
              alignWithLabel: true,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "答题时间分布",
          },
        ],
        series: [
          {
            name: "",
            type: "bar",
            barWidth: "60%",
            // data: [10, 52, 200, 334, 390, 330, 220],
            data:[],
          },
        ],
      },
      option4: {
        color: ["#3398DB"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        grid: {
          left: "3%",
          right: "10%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            name: "题目类型",
            nameGap: 0, // 距离坐标轴的距离
            // data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
            data:[],
            axisTick: {
              alignWithLabel: true,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "考题分布",
          },
        ],
        series: [
          {
            name: "",
            type: "bar",
            barWidth: "60%",
            // data: [10, 52, 200, 334, 390, 330, 220],
            data:[],
          },
        ],
      },
    };
  },
  mounted() {
    this.getData();
    // this.getChart1();
    // this.getChart2();
    // this.getChart3();
    // this.getChart4();
  },
  methods: {
    getData() {
      this.$axios
        .get("/assessment/charts", {
          params: {
            planId: this.detailData.planId,
          },
        })
        .then((res) => {
          console.log(res.data);
          this.option1.series[0].data = res.data.avgScoreChart.seriesData;
          this.option1.xAxis[0].data = res.data.avgScoreChart.xaxisData;

          this.option2.series[0].data = res.data.distributionScoreChart.seriesData;
          this.option2.xAxis[0].data = res.data.distributionScoreChart.xaxisData;

          this.option3.series[0].data = res.data.distributionTimeChart.seriesData;
          this.option3.xAxis[0].data = res.data.distributionTimeChart.xaxisData;

          this.option4.series[0].data =
            res.data.distributionAssessmentChart.seriesData;
          this.option4.xAxis[0].data =
            res.data.distributionAssessmentChart.xaxisData;
          this.getChart1();
          this.getChart2();
          this.getChart3();
          this.getChart4();
        });
    },
    getChart1() {
      this.chartBox = this.$echarts.init(
        document.getElementsByClassName("TheryChartContainer1")[0]
      );

      this.chartBox.setOption(this.option1);
      // 根据页面大小自动响应图表大小
      window.addEventListener("resize", function () {
        chartBox.resize();
      });
    },
    getChart2() {
      this.chartBox = this.$echarts.init(
        document.getElementsByClassName("TheryChartContainer2")[0]
      );

      this.chartBox.setOption(this.option2);
      // 根据页面大小自动响应图表大小
      window.addEventListener("resize", function () {
        chartBox.resize();
      });
    },
    getChart3() {
      this.chartBox = this.$echarts.init(
        document.getElementsByClassName("TheryChartContainer3")[0]
      );

      this.chartBox.setOption(this.option3);
      // 根据页面大小自动响应图表大小
      window.addEventListener("resize", function () {
        chartBox.resize();
      });
    },
    getChart4() {
      this.chartBox = this.$echarts.init(
        document.getElementsByClassName("TheryChartContainer4")[0]
      );

      this.chartBox.setOption(this.option4);
      // 根据页面大小自动响应图表大小
      window.addEventListener("resize", function () {
        chartBox.resize();
      });
    },
  },
};
</script>

<style lang="scss" scoped>
#TheryChart {
  display: flex;
  flex-flow: wrap;
  justify-content: space-around;
  div {
    width: 45%;
    height: 325px;
  }
}
</style>